<m-center>
    <m-card [autoHeight]="true">
        <ng-container card-head>
            <m-key-search name="人员列表" [useRouteQueryParam]="true">
                <div>
                    <button *ngIf="issuper" class="ml-2 btn btn-primary m-btn" (click)="openDialog()">同步</button>
                    <!-- <a href="/api/data/download/人员导入模板.xlsx">
            <m-button-icon icon="flaticon-template" color="secondary" class="mr-3">
              下载模版
            </m-button-icon>
          </a>
          <m-button-icon icon="flaticon-upload" color="secondary" (click)="import()" class="mr-3">
            批量导入
          </m-button-icon>
          <m-button-icon icon="flaticon-add" [routerLink]="['./add']">添加人员</m-button-icon> -->
                </div>
            </m-key-search>
        </ng-container>
        
        <m-data-table *ngIf="result$ | async as result" [data]="result.list" [result]="result" [selection]="selection" [sortable]="Sortable" [sortUseRouteQueryParam]="true">
            <ng-container mDataTableColumn="full_name" header="姓名">
                <ng-template let-id="id" let-name="full_name">
                    <td>
                        <a [mDetailRouterLink]="{ id: id, name: name, type: 'personnel' }">
              {{ name }}
            </a>
                    </td>
                </ng-template>
            </ng-container>
            <ng-container mDataTableColumn="utype" header="角色">
                <ng-template let-type="utype">
                    <td>
                        <m-user-type-text [type]="type"></m-user-type-text>
                    </td>
                </ng-template>
            </ng-container>
            <ng-container mDataTableColumn header="备注">
                <ng-template let-remark="remark">
                    <td>{{ remark }}</td>
                </ng-template>
            </ng-container>
            <ng-container mDataTableColumn="status" header="状态">
                <ng-template let-status="status">
                    <td>
                        <m-user-status-text [status]="status"></m-user-status-text>
                    </td>
                </ng-template>
            </ng-container>
            <ng-container mDataTableColumn="job_number" header="工号">
                <ng-template let-job="job_number">
                    <td>{{ job }}</td>
                </ng-template>
            </ng-container>
            <ng-container mDataTableColumn header="区域数">
                <ng-template let-count="area_count">
                    <td>{{ count }}</td>
                </ng-template>
            </ng-container>
            <ng-container mDataTableColumn header="在线">
                <ng-template let-status="online">
                    <td>
                        <m-online-status-text [status]="status"></m-online-status-text>
                    </td>
                </ng-template>
            </ng-container>
            <ng-container mDataTableColumn="update_admin_username" header="编辑人">
                <ng-template let-admin="update_admin_username">
                    <td>{{ admin }}</td>
                </ng-template>
            </ng-container>
            <ng-container mDataTableColumn="updated_at" header="编辑时间">
                <ng-template let-time="updated_at">
                    <td>{{ time | date }}</td>
                </ng-template>
            </ng-container>
            <ng-container mDataTableColumn header="操作">
                <ng-template let-user>
                    <td>
                        <button mat-icon-button [matMenuTriggerFor]="editMenu">
              <mat-icon>edit</mat-icon>
            </button>
                        <mat-menu #editMenu>
                            <button mat-menu-item (click)="goDetail(user.id, user.full_name)">详情</button>
                            <ng-container *ngIf="user.status === UserStatus.Enable; else enableTpl">
                                <button mat-menu-item (click)="disable([user.id])">停用</button>
                            </ng-container>
                            <ng-template #enableTpl>
                                <button mat-menu-item (click)="enable([user.id])">启用</button>
                            </ng-template>
                            <!-- <button mat-menu-item (click)="delete([user])">删除</button> -->
                        </mat-menu>
                    </td>
                </ng-template>
            </ng-container>
            <m-pagination [length]="result.total" [pageSize]="result.pageSize">
                <div>
                    <button class="btn btn-sm btn-secondary mr-3" (click)="selection.select(result.list)">
            全选
          </button>
                    <button class="btn btn-sm btn-secondary" [matMenuTriggerFor]="batchMenu">批量操作</button>
                    <mat-menu #batchMenu>
                        <button mat-menu-item (click)="enable(selection.keys())">启用</button>
                        <button mat-menu-item (click)="disable(selection.keys())">停用</button>
                        <!-- <button mat-menu-item (click)="delete(selection.selected)">删除</button> -->
                    </mat-menu>
                </div>
            </m-pagination>
        </m-data-table>
    </m-card>

    <m-history [type]="'personnel'" [length]="8"></m-history>
</m-center>